<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论栏</title>
    <style>
        table {
            margin: 0 auto;
            width: 60%;
            text-align: center;
            border: 1px solid #151515;
            border-collapse: collapse;
            padding: 20px;
        }

        .active {
            width: 50%;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 用户输入评论 -->
        <textarea name="" id="" cols="30" rows="10" autofocus="autofocus" v-model.trim="ipt"
            @keyup.enter="putFn(ipt)"></textarea>
        <button @click="putFn(ipt)">发布评论</button>
        <!-- 渲染用户的评论 -->
        <table cellpadding="5">
            <tr v-for="(item,index) in list">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td :class="{active:true}">{{ item.contents }}</td>
                <!-- <td>{{ item.count }} <button v-on:click.once="item.count++">点赞</button></td> -->
                <td>{{ item.count }} <button @click.once="likeFn(item,index)">点赞</button></td>
                <td>{{ item.time }}</td>
                <td><button @click="topFn(item,index)">置顶</button></td>
                <td><button @click="deleteFn(index)">删除</button></td>
            </tr>
        </table>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                ipt: '',
                list: [
                    {
                        id: 1,
                        name: '茄子',
                        contents: '住在山里的感觉整不错!',
                        count: 0,
                        time: '2021-10-11'
                    },
                    {
                        id: 2,
                        name: 'jy',
                        contents: '今天天气真不错! 是个打csgo的好日子!',
                        count: 0,
                        time: '2021-10-12'
                    },
                    {
                        id: 3,
                        name: '马冬梅',
                        contents: '臭不要脸',
                        count: 0,
                        time: '2021-10-11'
                    },
                    {
                        id: 4,
                        name: '袁华',
                        contents: '不！！！！！！！！！！！',
                        count: 0,
                        time: '2021-10-12'
                    }
                ]
            },
            methods: {
                // 增加评论
                putFn(ipt) {
                    if (!this.ipt) {
                        alert("请输入内容")
                    } else {
                        let res = {
                            id: this.list.length + 1,
                            name: "夏洛",
                            contents: this.ipt,
                            count: 0,
                            time: new Date().toLocaleString()
                        }
                        this.list.push(res);
                        // 发布完后清空输入框文本
                        this.ipt = "";
                    }
                },
                // 点赞
                likeFn(item, index) {
                    // item.count++;
                    console.log(index);
                    console.log(item);
                    this.list[index].count++;
                },
                // 删除单行
                deleteFn(index) {
                    this.list.splice(index, 1);
                    // id排序
                    for (let j = this.list.length - 1; j >= 0; j--) {
                        this.list[j].id = j + 1;
                    }
                },
                // 置顶单行
                topFn(item, index) {
                    // 删除指定的数组成员
                    this.list.splice(index, 1);
                    // 将指定的数组成员添加到第一项
                    this.list.unshift(item);
                    // index++;
                    // id排序
                    for (let j = this.list.length - 1; j >= 0; j--) {
                        this.list[j].id = j + 1;
                    }
                }

            }
        })
    </script>
</body>

</html>